<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>米兔动画练习</title>
    <!-- <link rel="stylesheet" href="../css/reset.css"> -->
</head>
<style>
    .box1 {
        height: 271px;
        width: 132px;
        margin: 0 auto;
        background-image: url(../images/mitu/mitu.png);
        background-position: 0 0;
        transition: 0.5s steps(3);
    }
    
    .box1:hover {
        background-position: -396px 0;
    }
</style>

<body>
    <div class="box1"></div>
</body>

</html>